<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>04-组件的返回值</title>
    <script type="text/javascript" src="../VueJs/vue.js"></script>
</head>
<body>
    <!-- 
        总结：
            a. 虽然组件创建可以简写，但是Vue.extend()才能看到返回值是构造函数
               也就是说，如果使用简写方式，那么默认vue会在内部调用构造函数传入数据
            b. 所以虽然有返回构造函数，但不是为程序员准备的
               调用也会产生实例，但这个实例和vm实例不是一回事
            c. 最终都是在使用组件的过程中创建的实例并且挂载到了vm上进行管理

            核心点：在组件中的this，其实指向的是自身的vc实例，所以访问不到vm上的数据
                   每一个子组件都是vc，最终都会挂载到vm上
     -->
    <div id="demo"> </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        const App = Vue.extend({
            data() {
                return {
                    num: 100
                }
            },
            methods: {
                fn() {
                    this.num++
                    // 在子组件中，this还会指向vm吗？
                    console.log(this)
                }
            },
            template: `
                <div>
                    <h3> 子组件创建的简写方式 </h3>
                    <span>{{ num }}</span>
                    <button @click="fn">按钮</button>
                </div>
            `
        })

        // 通过 Vue.extend() 创建组件，会返回一个构造函数
        // console.log(new App()) // 可以创建出来一个类似于vm的实例
        // const vc = new App() // 没有必要单独去创建实例
        // 最终返回的构造函数，不是给程序员准备的，是给vm准备的
    
        const vm = new Vue({
            el: '#demo',
            components: {
                App
            },
            template: `<App />`
        })
        // console.log(vm)


        // console.log(vm === vc)
    </script>
</body>
</html>